<template>
  <div class="middle">
    <div class="left">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-show="role==='student'">
        <el-tab-pane label="我学的" name="first">
        </el-tab-pane>
        <el-tab-pane label="我协助的" name="second">
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeName" @tab-click="handleClick" v-show="role==='teacher'">
        <el-tab-pane label="我教的" name="first"><h1>我教的</h1></el-tab-pane>
        <el-tab-pane label="我学的" name="second"><h1>我学的</h1></el-tab-pane>
        <el-tab-pane label="我协助的" name="third"><h1>我协助的</h1></el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <el-button>归档管理</el-button>
      <el-input
          placeholder="搜索我学的课程"
          prefix-icon="el-icon-search"
          v-model="input1">
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab) {
      this.$emit('changeStudy',tab.name)
    }
  },
  props: ['role'],
}
</script>

<style scoped>
.middle {
  max-width: 1470px;
  margin: 0 auto;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 20px;
  color: #575a5b;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left {
  margin-left: 7px;
}

.right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-tabs__content {
  display: none;
}

::v-deep .el-input__prefix {
  margin-left: 215px;
}

::v-deep .el-tabs__item {
  font-size: 21px;
}

::v-deep .el-button {
  font-size: 17px;
  width: 140px;
  height: 47px;
  margin-right: 30px;
}

::v-deep .el-input__inner {
  border-radius: 25px;
  height: 47px;
  padding: 0 22px;
}

::v-deep .el-input {
  font-size: 18px;
  width: 60%;
}

::v-deep .el-input__icon {
  margin-right: 16px;
  font-size: 20px;
  line-height: 49px;
}
</style>